<template>

    <a-modal :open="open" title="权限设置" @ok="handleOk" @cancel="cancel" okText="确定" cancelText="取消">
        <a-transfer v-model:target-keys="targetKeys" class="tree-transfer"
         :data-source="dataSource" :rowKey="record => record.id" 
            :render="item => item.label" :show-select-all="false">
            <template #children="{ direction, selectedKeys, onItemSelect }">
                <a-tree v-if="direction === 'left'" block-node checkable check-strictly default-expand-all    :fieldNames="fieldNames"
                    :checked-keys="[...selectedKeys, ...targetKeys]" :tree-data="treeData" @check="(_, props) => {
                            onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect);
                        }
                        " @select="(_, props) => {
                onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect);
            }
            " />
            </template>
        </a-transfer>
    </a-modal>
</template>

<script setup name="AuthorityModal">
import { pageN } from '@/api/menu';
import { hasPermission,allocationPermission} from '@/api/role';
import { message } from 'ant-design-vue';

//定义弹框关闭 页面要刷新
const emit = defineEmits(['refresh'])
const fieldNames = {
  title: 'label',
  key: 'id',
  children:'children'
};

const roleId=ref();
const tData = ref([])
const transferDataSource = [];

function flatten(list = []) {
    
    list.forEach(item => {
       
        transferDataSource.push(item);
        flatten(item.children);
    });
}

function isChecked(selectedKeys, eventKey) {
    return selectedKeys.indexOf(eventKey) !== -1;
}
function handleTreeData(treeNodes, targetKeys = []) {

    return treeNodes.map(({ children, ...props }) => ({
        ...props,

        disabled: targetKeys.includes(props.id),
        children: handleTreeData(children ?? [], targetKeys),
    }));
}
const targetKeys = ref([]);
const dataSource = ref(transferDataSource);
const treeData = computed(() => {
   
    return handleTreeData(tData.value, targetKeys.value);
});
const onChecked = (e, checkedKeys, onItemSelect) => {

    const { eventKey } = e.node;
    onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
};

//弹框的开关
const open = ref(false)



//设置弹框的开闭 第一个参数是否是是新增  第二个参数是数据
async function openModal(id) {

    const { data } = await pageN();
    tData.value = data;
    flatten(JSON.parse(JSON.stringify(data)))
    roleId.value =id;
    const res =await hasPermission(id)
    targetKeys.value=res.data
    open.value = true;
}
//关闭弹框
const cancel = e => {
    open.value = false
}
//提交
const handleOk = async e => {

    const data ={
        "roleId":roleId.value,
        "permission":targetKeys.value
    }
    allocationPermission(data)

    message.success({
    content:"成功",
    duration:1,
    onClose:()=>{
        open.value = false;
        emit('refresh')
    }
  }) 
  

};
//在这里暴露这个方法 在外面调用
defineExpose({ openModal })

</script>

<style scoped>
.tree-transfer .ant-transfer-list:first-child {
    width: 50%;
    flex: none;
}
</style>